<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线考试平台</title>
    <link rel="shortcut icon" href="static/layui/images/exam.png" type="image/x-icon">
    <link rel="stylesheet" href="static/layui/css/font.css">
    <link rel="stylesheet" href="static/layui/css/xadmin.css">
    <script src="static/layui/lib/layui/layui.js"></script>
    <script src="static/layui/js/xadmin.js"></script>
    <script src="static/layui/js/jquery.min.js"></script>
    <script src="static/layui/js/echarts.min.js"></script>

</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15" style="background: #f7f8fc">
        <div class="layui-row layui-col-space15">
            <form class="layui-form layui-form-pane" action="" lay-filter="example">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属科目</label>
                    <div class="layui-input-inline">
                        <select lay-filter="test" name="s_id" class="subject">
                        </select>
                    </div>
                    <label class="layui-form-label">考试场次</label>
                    <div class="layui-input-inline">
                        <select lay-filter="test1" name="e_id" class="exam">

                        </select>
                    </div>
                </div>
            </form>
        </div>
        
        <div class="layui-col-md12">

            <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                <li class="layui-col-md2 layui-col-xs6">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>试卷总分</h3>
                        <p>
                            <cite id="score_total"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>及格分数</h3>
                        <p>
                            <cite id="score_pass"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>考试人数</h3>
                        <p>
                            <cite id="exam_total"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>已完成</h3>
                        <p>
                            <cite id="finish_total"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>未完成</h3>
                        <p>
                            <cite id="no_finish_total"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>已批阅</h3>
                        <p>
                            <cite id="review_total"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>未批阅</h3>
                        <p>
                            <cite id="no_review_total"></cite></p>
                    </a>
                </li>

                <li class="layui-col-md2 layui-col-xs6 ">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>及格人数</h3>
                        <p>
                            <cite id="pass_total"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6 ">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>平均分</h3>
                        <p>
                            <cite id="average_score"></cite></p>
                    </a>
                </li>
                <li class="layui-col-md2 layui-col-xs6 ">
                    <a href="javascript:;" class="x-admin-backlog-body">
                        <h3>最高分</h3>
                        <p>
                            <cite id="max_score"></cite></p>
                    </a>
                </li>
            </ul>
        </div>

        <div id="charts">
            
        </div>

        <div class="layui-col-md12">
            <div class="layui-card-header">
                排名表
            </div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space15" id="user_score">
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    layui.use(['element', "form", 'jquery', 'layer', 'table'], function () {
        const form = layui.form;
        const $ = layui.jquery;
        const layer = layui.layer;
        const element = layui.element;
        const table = layui.table;


        form.on('select(test)', function (data) {
            get_exam_by_s_id();
        });
        form.on('select(test1)', function (data) {
            var text="<div class=\"layui-col-sm12 layui-col-md4\">" +
                "            <div class=\"layui-card\">" +
                "                <div class=\"layui-card-header\">成绩区间人数" +
                "                </div>" +
                "                <div class=\"layui-card-body\" style=\"min-height: 280px;\">" +
                "                    <div id=\"main1\" class=\"layui-col-sm12\" style=\"height: 300px;\"></div>" +
                "" +
                "                </div>" +
                "            </div>" +
                "        </div>" +
                "        <div class=\"layui-col-sm12 layui-col-md4\">" +
                "            <div class=\"layui-card\">" +
                "                <div class=\"layui-card-header\">成绩趋势" +
                "                </div>" +
                "                <div class=\"layui-card-body\" style=\"min-height: 280px;\">" +
                "                    <div id=\"main2\" class=\"layui-col-sm12\" style=\"height: 300px;\"></div>" +
                "" +
                "                </div>" +
                "            </div>" +
                "        </div>" +
                "        <div class=\"layui-col-sm12 layui-col-md4\">" +
                "            <div class=\"layui-card\">" +
                "                <div class=\"layui-card-header\">分数区间占比" +
                "                </div>" +
                "                <div class=\"layui-card-body\" style=\"min-height: 280px;\">" +
                "                    <div id=\"main3\" class=\"layui-col-sm12\" style=\"height: 300px;\"></div>" +
                "" +
                "                </div>" +
                "            </div>" +
                "        </div>"
            $("#charts").html(text);
            get_data_statistics_by_e_id();
        });
        get_all_subject();
    });

    function get_data_statistics_by_e_id() {
        layui.use(["form", 'jquery', 'layer', 'table'], function () {
            const $ = layui.jquery;
            const table = layui.table;
            const form = layui.form;
            const data = form.val("example");
            const e_id = Number(data.e_id);
            $.ajax({
                url: 'get_data_statistics_by_e_id',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data: {e_id: e_id},
                success: function (data) {
                    if (data.code === 200) {
                        $("#pass_total").text(data.result.pass_total);
                        $("#no_review_total").text(data.result.no_review_total);
                        $("#score_total").text(data.result.score_total);
                        $("#review_total").text(data.result.review_total);
                        $("#exam_total").text(data.result.exam_total);
                        $("#no_finish_total").text(data.result.no_finish_total);
                        $("#finish_total").text(data.result.finish_total);
                        $("#score_pass").text(data.result.score_pass);
                        $("#max_score").text(data.result.examUsers[0].paperResult.pr_total_score);
                        var text = "<table class=\"layui-table\" id='test'>" +
                            "  <thead><tr><th>学号</th><th>姓名</th><th>成绩</th></tr></thead><tbody>"
                        var total_score = 0
                        for (let i = 0; i < data.result.examUsers.length; i++) {
                            text += "<tr>" +
                                "<th>" + data.result.examUsers[i].sysUser.u_sno + "</th>" +
                                "<th>" + data.result.examUsers[i].sysUser.u_name + "</th>" +
                                "<th>" + data.result.examUsers[i].paperResult.pr_total_score + "</th>" +
                                "</tr> "
                            total_score += data.result.examUsers[i].paperResult.pr_total_score;
                        }
                        var average_score = total_score / data.result.examUsers.length;
                        $("#average_score").text(average_score.toFixed(1));
                        text += "</tbody></table>"
                        $("#user_score").html(text);

                        var score_total = data.result.score_total;
                        var n1 = score_total * 0.25;
                        var n2 = score_total * 0.50;
                        var n3 = score_total * 0.75;
                        var num1 = 0;
                        var num2 = 0;
                        var num3 = 0
                        var num4 = 0
                        var data1 = [];
                        var data2 = [];
                        var data3 = [];
                        var data4 = [];
                        var data5 = [];
                        data1.push("0-" + n1)
                        data1.push(n1 + "-" + n2)
                        data1.push(n2 + "-" + n3)
                        data1.push(n3 + "-" + score_total)
                        for (let i = 0; i < data.result.examUsers.length; i++) {
                            var pr_total_score = data.result.examUsers[i].paperResult.pr_total_score
                            var u_name = data.result.examUsers[i].sysUser.u_name
                            if (n3 < pr_total_score && pr_total_score < score_total) {
                                num4 += 1;
                            } else if (n2 < pr_total_score && pr_total_score < n3) {
                                num3 += 1;
                            } else if (n1 < pr_total_score && pr_total_score < n2) {
                                num2 += 1;
                            } else if (0 < pr_total_score && pr_total_score < n1) {
                                num1 += 1;
                            }
                            data4.push(pr_total_score);
                            data5.push(u_name);
                        }
                        data2.push({value: num1, name: "0-" + n1})
                        data2.push({value: num2, name: n1 + "-" + n2})
                        data2.push({value: num3, name: n2 + "-" + n3})
                        data2.push({value: num4, name: n3 + "-" + score_total})

                        data3.push(num1)
                        data3.push(num2)
                        data3.push(num3)
                        data3.push(num4)
                        score_type(data1, data2)
                        main1(data1, data3)
                        main2(data4, data5)
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });


        })
    }

    function main2(data1, data2) {
        var myChart = echarts.init(document.getElementById('main2'));
        // 指定图表的配置项和数据
        var option = {
            grid: {
                top: '5%',
                right: '1%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: data2
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '分数',
                data: data1,
                type: 'line',
                smooth: true
            }],

        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function main1(data1, data2) {
        var myChart = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        var option = {
            grid: {
                top: '5%',
                right: '1%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: data1
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '人数',
                data: data2,
                type: 'bar',
                itemStyle: {
                    normal:
                        {
                            color: '#15FFEB'
                        }
                },
            }],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


    function score_type(data1, data2) {
        var myChart = echarts.init(document.getElementById('main3'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data1
            },
            series: [
                {
                    name: '成绩分段',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data2,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


    function get_exam_by_s_id() {
        layui.use(["form", 'jquery', 'layer', 'table'], function () {
            const $ = layui.jquery;
            const layer = layui.layer;
            const table = layui.table;
            const form = layui.form;
            const data = form.val("example");
            const s_id = Number(data.s_id);
            $.ajax({
                url: 'get_exam_by_s_id',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                data: {s_id: s_id},
                success: function (data) {
                    if (data.code === 200) {
                        var text = "<option disabled>请选择</option>"
                        for (let i = 0; i < data.result.length; i++) {
                            text += "<option value=\"" + data.result[i].e_id + "\">" + data.result[i].e_name + "</option>"
                        }
                        $(".exam").html(text);
                        form.render();
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });


        })
    }

    function get_all_subject() {
        layui.use(['element', "form", 'jquery', 'layer'], function () {
            const form = layui.form;
            $.ajax({
                url: 'get_all_subject',
                dataType: "json",//数据格式
                type: "post",//请求方式
                async: false,//是否异步请求
                success: function (data) {
                    if (data.code === 200) {
                        var text = "<option disabled>请选择</option>"
                        for (let i = 0; i < data.result.length; i++) {
                            text += "<option value=\"" + data.result[i].s_id + "\">" + data.result[i].s_name + "</option>"
                        }
                        $(".subject").html(text);
                        form.render();
                    }
                },
                error: function (e) {
                    alert("出现错误！！");
                }
            });
        })
    }

</script>

</html>